<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="c" width="600" height="400" style="border: 1px solid #ccc"></canvas>

        <script>
            const cnv = document.getElementById('c')
            const ctx = cnv.getContext('2d')

            var img = new Image();
            img.src= '../image/fs.png';

            img.onload = function () {
                var pattern = ctx.createPattern(img,'repeat-y');
                ctx.fillStyle = pattern;
                ctx.fillRect(0,0,600,400)
            }
        </script>
    </body>
</html>
